import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card, Descriptions, message, Spin } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { history, useParams } from '@umijs/max';
import { getSchoolDetail } from '@/services/school';

const SchoolDetail: React.FC = () => {
  const params = useParams<{ id: string }>();
  const id = params.id;
  const [schoolData, setSchoolData] = useState<API.School | undefined>(undefined);
  const [loading, setLoading] = useState<boolean>(true);

  // 获取学校详情
  const fetchSchoolDetail = async () => {
    if (!id) {
      message.error('学校ID不存在');
      return;
    }

    setLoading(true);
    try {
      const response = await getSchoolDetail(id);
      if (response.success) {
        setSchoolData(response.data);
      } else {
        message.error(response.message || '获取学校详情失败');
      }
    } catch (error) {
      console.error('获取学校详情出错:', error);
      message.error('获取学校详情失败，请稍后再试');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchSchoolDetail();
  }, [id]);

  // 返回列表页
  const handleBack = () => {
    history.push('/school/list');
  };

  return (
    <PageContainer
      header={{
        title: '学校详情',
        onBack: handleBack,
        backIcon: <ArrowLeftOutlined />,
      }}
    >
      <Card>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <Spin size="large" />
          </div>
        ) : schoolData ? (
          <Descriptions
            bordered
            column={1}
            layout="vertical"
            style={{ marginBottom: 24 }}
          >
            <Descriptions.Item label="学校名称">{schoolData.name || '-'}</Descriptions.Item>
            <Descriptions.Item label="所属集团">{schoolData.groupName || '-'}</Descriptions.Item>
            <Descriptions.Item label="所在区域">{schoolData.regionName || '-'}</Descriptions.Item>
            <Descriptions.Item label="学校地址">{schoolData.address || '-'}</Descriptions.Item>
            <Descriptions.Item label="网站地址">
              {schoolData.website ? (
                <a href={schoolData.website} target="_blank" rel="noopener noreferrer">
                  {schoolData.website}
                </a>
              ) : (
                '-'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {schoolData.createTime
                ? new Date(schoolData.createTime).toLocaleString('zh-CN')
                : '-'}
            </Descriptions.Item>
            <Descriptions.Item label="更新时间">
              {schoolData.updateTime
                ? new Date(schoolData.updateTime).toLocaleString('zh-CN')
                : '-'}
            </Descriptions.Item>
          </Descriptions>
        ) : (
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            未找到学校信息
          </div>
        )}

        <div style={{ textAlign: 'center', marginTop: 24 }}>
          <Button type="primary" onClick={handleBack}>
            返回列表
          </Button>
        </div>
      </Card>
    </PageContainer>
  );
};

export default SchoolDetail;
